<script setup lang="ts">
import { reactive,ref,computed } from 'vue';

    const person=reactive({name:'张三',age:20})
    const changeAge=()=>{
        person.age++
    }

    const firstName = ref('zhang');
    const lastName = ref('san');
  /*   const fullName = computed(() => {
        return firstName.value.slice(0,1).toUpperCase() + firstName.value.slice(1)+'-'+ lastName.value;
    }); */

    const fullName = computed({
        get(){
            return firstName.value.slice(0,1).toUpperCase() + firstName.value.slice(1)+'-'+ lastName.value;
        },
        set(val){
            console.log('set'+val);
            let [str1,str2]=val.split('-');
            firstName.value=str1;
            lastName.value=str2;
        }  
    });

    function changeFullName(){
        fullName.value='li-si'
    }

</script>
<template>
    <div class="subDiv">这是子模块的地盘了<br>
        {{ person.name }}--|--{{ person.age }}
        <button @click="changeAge">修改年龄</button>
        <div>
          姓：<input type="text" v-model="firstName" /><br>
          名：<input type="text" v-model="lastName" /><br>
          全名：<input type="text" v-model="fullName" /><br>
          <button @click="changeFullName">修改全名</button>         
        </div>
    </div>
    
</template>
<style scoped>
    .subDiv{
        color:blue;
        background-color:rgb(210, 205, 205);
        width: 500px;
        height: 300px;
        font-size: 20px;
        }
    button{
        width: 100px;
        height: 30px;
        font-size: 15px;
        }
</style>